<template>
  <div class="node-common-wrapper" :data-node-name="title" :data-node-type="node_type">
    <!-- :class="{ isHovered: isHovered, isSelected: isSelected }":class="getRunStatus.status" -->
    <div :class="['node-common ', getRunStatus.status]">
      <div class="node-header">
        <div class="node-header-left">
          <span class="node-icon" v-if="iconName">
            <img :src="getImggeUrl(iconName)" alt="" />
          </span>
          <span class="node-title">{{ title }}</span>
        </div>
        <div>
          <div class="node-menu-wrapper" v-if="menus.length > 0">
            <div class="node-menu-btn" @click.stop="showMenu">
              <img class="btn-icon" src="@/assets/svg/node-menu-btn.svg" alt="" />
            </div>
            <div class="node-menus" v-show="isShowMenu">
              <div class="node-menu del-btn" v-for="item in menus" :key="item.key" @click.stop="handleMenu(item)">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="node-body">
        <slot></slot>
      </div>
      <div :class="['run-status ', getRunStatus.status]">
        <span v-if="getRunStatus.status === 'running'">
          <a-space>
            <span>运行中</span>
          </a-space>
        </span>
        <span v-else-if="getRunStatus.status === 'success'">
          <a-space>
            <span>运行成功</span>
            <span>耗时:{{ getRunStatus.timeText }}</span>
          </a-space>
        </span>
        <span v-else-if="getRunStatus.status === 'fail'">
          <a-space>
            <span> 运行失败</span>
            <span>耗时:{{ getRunStatus.timeText }}</span>
          </a-space>
        </span>
        <span v-else-if="getRunStatus.status === 'waiting'">
          <a-space>
            <span>等待</span>
          </a-space>
        </span>
      </div>
      <div class="remarks" v-if="properties?.remarks">
        <span>{{ properties.remarks }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, inject, onMounted, onBeforeUnmount, defineProps, defineEmits, computed } from 'vue';
import { useFlowRunStore } from '@/store/modules/airagFlowRunStore';
const runStore = useFlowRunStore();
const props = defineProps({
  model: {
    type: Object,
    default: null
  },
  properties: {
    type: Object,
    default: null
  },
  iconName: {
    type: String,
    default: ''
  },
  nodeKey: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  menus: {
    type: Array,
    default: () => []
  },
  isSelected: {
    type: Boolean,
    default: false
  },
  isHovered: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['handleMenu']);

const setTitle = inject('setTitle');
const isShowMenu = ref(false);

function handleMenu(item) {
  emit('handleMenu', item);
}

function showMenu() {
  isShowMenu.value = !isShowMenu.value;
}

// 点击菜单以外的地方，隐藏菜单
function documentClick(e) {
  if (isShowMenu.value) {
    const menus = document.querySelector('.node-menus');
    const menuBtn = document.querySelector('.node-menu-btn');
    const btnIcon = document.querySelector('.btn-icon');
    if (menus && !menus.contains(e.target) && e.target !== menuBtn && e.target !== btnIcon) {
      isShowMenu.value = false;
    }
  }
}
const getRunStatus = computed(() => {
  if (!(runStore.isRunning || runStore.isFinished)) {
    var status = '';
    if (props.isSelected) {
      status = ' isHovered isSelected';
    } else {
      if (props.isHovered) {
        status = ' isHovered';
      }
    }
    return { status: status, timeText: '' };
  }
  const nodeStep = runStore.nodeSteps.find(step => step.node.id === props.model.id);

  return nodeStep ? { status: nodeStep.status, timeText: nodeStep.timeText } : { status: 'waiting', timeText: '' };
});
function getImggeUrl(name) {
  let url = new URL(`../../../../../../assets/svg/${name}.svg`, import.meta.url);
  return url.href;
}

function updateTitle(newValue) {
  if (setTitle) setTitle(newValue);
}

onMounted(() => {
  document.addEventListener('click', documentClick);
});

onBeforeUnmount(() => {
  document.removeEventListener('click', documentClick);
});
</script>

<style lang="less" scoped>
.node-common {
  position: relative;
  width: 100%;
  padding: 12px 16px 16px 16px;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 2px 4px #d6d6d6;
  .node-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 24px;
    margin-bottom: 8px;
  }
  .node-title {
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    font-weight: 600;
    color: #262626;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .node-header-left {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .node-icon {
    display: flex;
    margin-right: 8px;
    img {
      width: 25px;
      height: 25px;
    }
  }
  .node-menu-wrapper {
    position: relative;
    .node-menu-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 24px;
      height: 24px;
      border-radius: 6px;
      cursor: pointer;

      &:hover {
        background-color: #e4e6eb;
      }

      .btn-icon {
        width: 16px;
        height: 16px;
      }
    }
    .node-menus {
      position: absolute;
      top: 26px;
      right: 4px;
      padding: 2px;
      z-index: 100;
      border-radius: 6px;
      background: #fff;
      box-shadow: 0 6px 30px 5px #0000000d, 0 16px 24px 2px #0000000a, 0 8px 10px -5px #00000014;
      .node-menu {
        height: 32px;
        line-height: 32px;
        padding: 0 16px;
        font-size: 14px;
        font-weight: 400;
        color: #595959;
        white-space: nowrap;
        cursor: pointer;

        &:hover {
          border-radius: 6px;
          background-color: #e4e6eb;
        }
      }

      .del-btn {
        color: #fb363f;
      }
    }
  }

  .node-title-input {
    border-width: 0;
    color: #262626;
    font-size: 16px;
    font-weight: 600;
    margin-right: 8px;
  }
  .node-title-input:hover {
    border-width: 1px;
  }
}

.node-common.isHovered {
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 1px solid #2475fc;
  }
}
.node-common.isSelected {
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 2px solid #2475fc;
  }
}
.node-common.running {
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 2px solid #1890ff;
  }
}

.node-common.success {
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 2px solid #52c41a;
  }
}

.node-common.fail {
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 2px solid #ff0000;
  }
}

.node-common-wrapper.node-common-wrapper_explain-node {
  .node-icon {
    display: none;
  }
  .node-title-input {
    padding-left: 0;
    font-size: 12px;
    color: #7a8699;
    font-weight: 400;
    background: #ffefd6;
  }
  .node-common {
    background: #ffefd6;
    padding: 16px;
  }
  .node-common.isHovered {
    &::before {
      border: 1px solid #bfbfbf;
    }
  }
  .node-common.isSelected {
    &::before {
      border: 2px solid #f90;
    }
  }
}
.run-status {
  margin-top: 8px;
}
.run-status.success {
  color: #52c41a;
}
.run-status.waiting {
  color: #666;
}
.run-status.running {
  color: #67b7ff;
}
.run-status.fail {
  color: #f5222d;
}
.remarks {
  margin-top: 8px;
  color: #666;
  font-size: 12px;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
